<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            数据绑定
        </title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            v-model: 只能用于输入类的标签.
            v-model:value 简写: v-model
         -->
        <div id="root">
            你好: {{name}}
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const v = new Vue({
                // el: "#root", //第一种写法: 直接指定容器
                // data:{
                //     name: "张三"
                // }
                // data:function(){ //函数式返回数据, 避免箭头函数, 否则this 不是vue对象.
                //     return{
                //         name: "张三"
                //     }
                // }
                data(){ //简写
                    return{
                        name: "张三"
                    }
                }
            })
            v.$mount('#root') // 第二种写法: 后面指定, 挂载
        </script>
    </body>
</html>